<template>

	<div class="box">
		<view class="content">
			<view class="searchBox">
				<view class="search">
					<view class="searchInput">搜索你感兴趣的</view>
					<icon :type="iconType[6]" size="26"/>		
				</view>				
			</view>
		
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/banner3.png" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/banner4.png" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/banner5.png" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			
			
			<u-notice-bar :text="announcementText"></u-notice-bar>
				
				
			
				

			
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				 iconType:  ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect'],
				 announcementText: '公告：uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		},
		onLoad() {
		
		},
		methods: {
		
		}
	}
</script>

<style lang="scss">
	*{
		box-sizing: border-box;
	}
	.box{
		background-color: white;
	}
.content{
	margin:0 auto;
	width:700rpx;
	height: auto;
	
}
.searchBox{
	margin-top: 10rpx;
	.search{
		display: flex;
		height:100rpx;
		border-radius: 15rpx;
		background-color: rgb(245,245,245);
		justify-content: space-around;
		align-items: center;
		.searchInput{
			height: 100%;
			width: 550rpx;
			line-height: 100rpx;
		}
	}
}
.banner{
	width:700rpx;
	height:300rpx;
	margin-top: 30rpx;
	background-color: pink;
	border-radius: 15rpx;
	image{
		width:100%;
		height: 300rpx;
		border-radius: 15rpx;
	}
}



.footer{
	display: flex;
	width: 750rpx;
	height: 100rpx;
	background-color: rgb(245,245,245);
	position: fixed;
	bottom: 0;
	box-sizing: border-box;
	.footItem{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		
		.iconfont{
			font-size: 40rpx;
		}
		.footfont{
			font-size: 20rpx;
		}
		.shouye{
			font-weight: 600!important;
		}
		.shichang{
			font-weight: 600!important;
		}
		.wode{
			font-weight: 600!important;
		}
	
	}
	.add{
		border: 5rpx solid #FEE354;
		border-radius: 35rpx;
		.addLogo{
			font-size:70rpx;
		}
	}
	.active{
		color:#fed507;
	}
}
.line{
	margin-top: 10rpx;
}

</style>
